<template>
  <el-drawer
      :title="rowData.name + ' 坑组成员'"
      size="600px"
      direction="ltr"
      append-to-body
      :show-close="false"
      :visible.sync="visible"
      :before-close="handleClose">
    <div id="manga-member-box">
      <div class="table-top-box">
        <el-button size="small" icon="el-icon-plus" class="theme-button" type="primary" @click="openMemberDialog">邀请成员</el-button>
        <div style="width: 200px;">
          <el-input
              clearable
              v-model="keyword"
              placeholder="请输入名称或职位名">
          </el-input>
        </div>
      </div>
      <!--   表格   -->
      <div id="table-box">
        <template>
          <el-table
              v-loading="loading"
              :data="filterData"
              stripe
              max-height="calc(100vh - 180px)"
              style="width: 100%">
            <el-table-column
                show-overflow-tooltip
                prop="userName"
                label="用户名称">
            </el-table-column>
            <el-table-column
                label="职位">
              <template slot-scope="scope">
                <el-tag
                    v-for="tag in scope.row.positionName"
                    :key="tag.key"
                    :type="handleTagType(tag.key)">
                  {{ tag.value }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="加入时间"
                align="center">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="openPositionDialog(scope.row)">修改职位</el-button>
                <el-button v-if="rowData.createBy !== scope.row.uid" type="text" size="small" style="color: #F56C6C;" @click="removeMember(scope.row)">移出</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>

        <!--   修改职位弹窗   -->
        <el-dialog append-to-body width="350px" :title="'调整' + positionDialogData.userName + '的职位'"
                   :visible.sync="positionDialogVisible">
          <div id="position-box">
            <el-select v-model="positionSelect" multiple placeholder="请选择">
              <el-option
                  v-for="item in positionList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key">
              </el-option>
            </el-select>
            <el-button class="theme-button btn" style="float: right" :loading="changeLoading" @click="changePosition"
                       type="primary">确认
            </el-button>
          </div>
        </el-dialog>

        <!--   邀请组员弹窗   -->
        <el-dialog append-to-body width="400px" title="邀请组员"
                   :visible.sync="teamMemberDialogVisible">
          <div id="team-member-box">
            <el-select style="width: 70%;"
                       v-model="teamMemberSelect"
                       collapse-tags
                       filterable
                       multiple placeholder="请选择">
              <el-option
                  v-for="item in teamMemberList"
                  :key="item.uid"
                  :label="item.userName"
                  :value="item.uid">
                <span style="float: left">{{ item.userName }}</span>
                <el-tooltip effect="dark" placement="right" :content="item.positionName.map(tag => tag.value).join('/')">
                  <span class="text-ellipsis" style="float: right; color: #8492a6; font-size: 13px; width: 50px;">{{ item.positionName.map(tag => tag.value).join("/") }}</span>
                </el-tooltip>
              </el-option>
            </el-select>
            <el-button class="theme-button btn" style="float: right" :loading="changeLoading" @click="appendMember" type="primary">确认</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import {mangaMember, position, changePosition, removeMember, appendMember} from "@/api/mgApi";
import {teamMember} from "@/api/cnTeamApi";

export default {
  name: "mangaMemberTable",
  data() {
    return {
      visible: false,
      loading: false,
      keyword: '',
      tableData: [],
      rowData: {},
      positionList: [],

      // 修改职位弹窗相关
      positionDialogVisible: false,
      positionDialogData: {},
      changeLoading: false,
      positionSelect: [],

      // 邀请组员弹窗相关
      teamMemberDialogVisible: false,
      teamMemberKeyword: '',
      teamMemberList: [],
      teamMemberSelect: [],
    }
  },
  computed: {
    filterData() {
      if (this.keyword) {
        return this.tableData.filter(item => {
          // 模糊搜索名字或职位
          return item.userName.indexOf(this.keyword) !== -1 ||
              item.positionName.some(item => {
                return item.value.indexOf(this.keyword) !== -1
              })
        })
      } else {
        return this.tableData
      }
    }
  },
  methods: {
    openWindow(row) {
      this.visible = true
      this.flashData(row.mangaId)
      this.rowData = row
    },
    handleClose() {
      this.visible = false
    },
    handleTagType(val) {
      switch (val) {
        case '0':
          return 'info'
        case '1':
          return 'danger'
        default:
          return ''
      }
    },
    flashData(mangaId) {
      this.loading = true
      mangaMember(mangaId).then(res => {
        this.tableData = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    getPosition() {
      position().then(res => {
        this.positionList = res.data
      })
    },
    openPositionDialog(row) {
      this.positionDialogData = row
      this.positionSelect = row.positionName.map(item => item.key)
      this.positionDialogVisible = true
    },
    changePosition() {
      this.changeLoading = true
      let data = {
        mangaId: this.rowData.mangaId,
        uid: this.positionDialogData.uid,
        positionIds: this.positionSelect
      }
      changePosition(data).then(res => {
        if (res.code === '200') {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.flashData(this.rowData.mangaId)
          this.positionDialogVisible = false
        }
      }).finally(() => {
        this.changeLoading = false
      })
    },
    openMemberDialog() {
      this.teamMemberDialogVisible = true
      this.teamMemberSelect = this.tableData.map(item => item.uid)
      this.getTeamMember()
    },
    appendMember() {
      let data = {
        mangaId: this.rowData.mangaId,
        memberList: this.teamMemberSelect
      }
      appendMember(data).then(res => {
        if (res.code === '200') {
          this.$message({
            message: '邀请成功',
            type: 'success'
          })
          this.flashData(this.rowData.mangaId)
          this.teamMemberDialogVisible = false
        }
      })
    },
    getTeamMember() {
      teamMember(this.rowData.tid).then(res => {
        this.teamMemberList = res.data
      })
    },
    removeMember(row) {
      this.$confirm('此操作将移出该成员, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        removeMember(this.rowData.mangaId, row.uid).then(res => {
          if (res.code === '200') {
            this.$message({
              message: '移出成功',
              type: 'success'
            })
            this.flashData(this.rowData.mangaId)
          }
        })
      })
    }
  },
  mounted() {
    this.getPosition()
  }
}
</script>

<style scoped lang="scss">
#manga-member-box {
  width: 100%;
  height: 100%;
  padding: 0 20px 0 20px;
  display: flex;
  flex-direction: column;

  .table-top-box {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }

  ::v-deep .el-table__body-wrapper {
    /* 滚动条背景 */
    &::-webkit-scrollbar {
      width: 7px !important;
      height: 7px !important;
      border-radius: 5px !important;
      background-color: rgb(245, 245, 245, 0.5) !important;
    }

    /* 滑块 */
    &::-webkit-scrollbar-thumb {
      border-radius: 5px !important;
      background-color: var(--theme-color) !important;
    }
  }

}

#table-box {
  margin-top: 10px;
  background-color: #f0f0f0; /* 设置背景色 */
  border-top: 1px solid #ccc; /* 仅保留上边框 */
  border-bottom: 1px solid #ccc; /* 仅保留下边框 */
  border-radius: 5px; /* 保持圆角 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 -2px 5px rgba(0, 0, 0, 0.1); /* 调整阴影效果，仅保留上下 */
}

#team-member-box {
  width: 100%;
}
</style>

